<template>
  <page-header-wrapper :title="false">
    <a-card>
      <standard-form-row title="视频名称" block>
        <a-input-search style="width: 300px" placeholder="请输入要搜索的内容" />
      </standard-form-row>
      <standard-form-row title="培训分类" block>
        <a-radio-group v-model="currentTab" @change="onRadio">
          <a-radio-button :value="item.id" v-for="item in classes" :key="item.id">
            {{item.title}}
          </a-radio-button>
        </a-radio-group>
      </standard-form-row>
    </a-card>
    <a-card :style="{ marginTop: '20px' }">
      <a-spin :spinning="loading">
        <a-row :gutter="[0, 30]">
          <a-col :span="24">
            <a-list
              bordered
              class="demo-loadmore-list"
              item-layout="horizontal"
              :grid="{ column: 2 }"
              :data-source="latelyData"
            >
              <a-list-item slot="renderItem" slot-scope="item, index" :style="{ marginTop: '20px', height: '30px' }">
                <a-row>
                  <a-col :span="20">
                    {{index + 1}}. {{ item.title }}
                    <a-divider type="vertical" />
                    作者：{{item.author}}
                    <a-divider type="vertical" />
                    时长：{{item.video_time}}
                  </a-col>
                  <a-col :span="4">
                    <a-button type="primary" size="small" ghost @click="onPlayVideo(item)">播放</a-button>
                  </a-col>
                </a-row>
              </a-list-item>
              <div slot="header">
                <h3>近15天更新视频</h3>
              </div>
            </a-list>
          </a-col>
          <a-col :span="24" v-for="item in viewData" :key="item.id">
            <a-list
              bordered
              class="demo-loadmore-list"
              item-layout="horizontal"
              :grid="{ column: 2 }"
              :data-source="item.videoData"
            >
              <a-list-item slot="renderItem" slot-scope="item, index" :style="{ marginTop: '20px', height: '30px' }">
                <a-row>
                  <a-col :span="20">
                    {{index + 1}}. {{item.title}}
                    <a-divider type="vertical" />
                    作者：{{item.author}}
                    <a-divider type="vertical" />
                    时长：{{item.video_time}}
                  </a-col>
                  <a-col :span="4">
                    <a-button type="primary" size="small" ghost @click="onPlayVideo(item)">播放</a-button>
                  </a-col>
                </a-row>
              </a-list-item>
              <div slot="header">
                <h3>{{item.className}}</h3>
              </div>
            </a-list>
          </a-col>
        </a-row>
      </a-spin>
    </a-card>
    <player-wrapper v-if="visible" :video="video" @cancel="onCancel"></player-wrapper>
  </page-header-wrapper>
</template>

<script>
import { StandardFormRow, STable } from '@/components'
import PlayerWrapper from './components/PlayerWrapper'
import { getAllVideo, getClass, getLatelyVideo } from '@/api/video'

export default {
  components: {
    STable,
    StandardFormRow,
    PlayerWrapper
  },
  name: 'VideoView',
  data () {
    return {
      viewData: [],
      latelyData: [],
      loading: false,
      currentTab: '1',
      classData: [],
      video: {},
      visible: false
    }
  },
  created () {
    this.getAllVideo()
  },
  methods: {
    getClasses () {
      const app = this
      getClass().then(res => {
        app.classes = res.result.data
      }).finally(() => {
        app.getList()
      })
    },
    getAllVideo () {
      this.loading = true
      getAllVideo(this.queryParam).then(res => {
        this.viewData = res.result.data
      }).finally(() => {
        this.getLatelyVideo()
        this.loading = false
      })
    },
    getLatelyVideo () {
      getLatelyVideo().then(res => {
        this.latelyData = res.result.data
      })
    },
    onPlayVideo (video) {
      this.video = video
      this.visible = true
    },
    onCancel (visible) {
      this.visible = visible
    }
  }
}
</script>

<style scoped>

</style>
